<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设置视口大小 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta name="viewport" content="width=375px"> -->
    <!-- <meta name="viewport" content="width=device-width"> -->
    <title>mobile</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 
        移动端默认视口980 css像素
            默认,移动端像素比为 980/移动端宽度 980/750
            编写移动端网页时,需要确保一个合理的像素比
            1 css px 对应2个物理像素
            1 css px 对应3个物理像素
            通过meta标签来设置视口大小 content="width=device-width"
                每一款设备都有最佳像素比
                像素比为最佳像素比的视口大小为完美视口
     -->
    <div class="box1"></div>
</body>

</html>